<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    error-text="没有更多了"
    @load="onLoad"
  >
    <div class="box">
      <!-- navbar导航栏 -->
      <van-nav-bar title="值得买" fixed placeholder>
        <van-icon name="wap-home-o" />
        <template #left>
          <van-icon
            name="wap-home-o"
            size="24"
            @click="toHome"
            style="color: #666"
          />
        </template>
        <template #right>
          <van-icon
            name="search"
            size="24"
            @click="toSearch"
            style="color: #666; margin-right: 20px"
          />
          <van-icon
            name="shopping-cart-o"
            size="24"
            style="color: #666"
            @click="toCard"
          />
        </template>
      </van-nav-bar>

      <!-- 版心区 -->
      <div class="topicContainer">
        <!-- 图片和文字 -->
        <div class="topic">
          <img
            src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
          />
          <div class="title">严选好物&nbsp;用心生活</div>
        </div>

        <!-- 轮播区 -->
        <div class="swiperContainer">
          <van-swipe
            class="my-swipe"
            :autoplay="3000"
            indicator-color="#dd1a21"
            show-indicators
          >
            <van-swipe-item>
              <van-grid :border="false" :column-num="4">
                <van-grid-item v-for="s in swiperList.slice(0, 8)" :key="s.id">
                  <a class="toDetail" :href="s.columnUrl">
                    <van-image :src="s.picUrl" />
                    <van-grid-item class="mainTitle" :text="s.mainTitle" />
                    <van-grid-item class="viceTitle" :text="s.viceTitle" />
                  </a>
                </van-grid-item>
              </van-grid>
            </van-swipe-item>

            <van-swipe-item>
              <van-grid :border="false" :column-num="4">
                <van-grid-item
                  v-for="s in swiperList.slice(6)"
                  :key="s.id"
                  :url="s.columnUrl"
                >
                  <van-image :src="s.picUrl" />
                  <van-grid-item class="mainTitle" :text="s.mainTitle" />
                  <van-grid-item class="viceTitle" :text="s.viceTitle" />
                </van-grid-item>
              </van-grid>
            </van-swipe-item>
          </van-swipe>
        </div>

        <!-- 瀑布流 -->
        <div class="waterfallContainer" style="background: #eee">
          <Waterfall
            style="background: #eee"
            :list="list"
            :gutter="10"
            :width="240"
            :breakpoints="{
              1200: {
                //当屏幕宽度小于等于1200
                rowPerView: 4,
              },
              800: {
                //当屏幕宽度小于等于800
                rowPerView: 3,
              },
              500: {
                //当屏幕宽度小于等于500
                rowPerView: 2,
              },
            }"
            animationEffect="fadeInUp"
            ref="waterfall"
          >
            <template v-slot:item="props">
              <div
                class="card"
                style="background: #fff; border-radius: 10px; overflow: hidden"
              >
                <el-row>
                  <el-col>
                    <el-card :body-style="{ padding: '0px' }" @click="toDetail">
                      <a :href="`https://you.163.com${props.data.schemeUrl}`">
                        <!-- 大图 -->
                        <img :src="props.data.picUrl" lazy-load class="image" />
                        <span class="sloganText">{{
                          props.data.title.slice(0, 7)
                        }}</span>
                        <div style="padding: 14px">
                          <div class="bottom">
                            <!-- 左边：用户图片、用户名 -->
                            <div class="contentLeft">
                              <div>
                                <img
                                  :src="props.data.avatar"
                                  lazy-load
                                  alt=""
                                />
                              </div>
                              <time class="time">{{
                                props.data.nickname
                              }}</time>
                            </div>
                            <!-- 右边： 小眼睛点击量 -->
                            <div class="contentRight">
                              <div>
                                <img
                                  src="	https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                />
                              </div>
                              <el-button text class="button">{{
                                props.data.readCount
                              }}</el-button>
                            </div>
                          </div>
                        </div>
                      </a>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </template>
          </Waterfall>
        </div>
      </div>
    </div>
  </van-list>
</template>


<script setup lang="ts">
import {
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Icon,
  Toast,
  showFailToast,
  List,
  Lazyload,
} from "vant";
import { useRouter } from "vue-router";
import { onMounted, ref, onUpdated, onBeforeUpdate, watch } from "vue";
import request from "../../../utils/request";
import Waterfall from "vue3-waterfall-plugin";
// import userInfoApi from "@/api/userInfo";

// 头部导航点击路由跳转
const $router = useRouter();
const toHome = () => {
  $router.push("/");
};
const toCard = () => {
  $router.push("/cart");
};
const toSearch = () => {
  $router.push("/search");
};

// 轮播图数据类型
interface swiperListModel {
  id: number;
  picUrl: string;
  mainTitle: string;
  viceTitle: string;
  columnUrl: string;
}
const swiperList = ref<swiperListModel[]>([]);
// 获取轮播图数据
const getSwiperList = async () => {
  try {
    let res = await request.get("/wy/topic/v1/know/navWap.json");
    swiperList.value = res.data.navList;
  } catch (error) {
    showFailToast("获取轮播图数据失败，请刷新重试");
  }
};

// 瀑布流数据类型
interface waterfallListModel {}
const page = ref(1);
const size = ref(2);
const list = ref<any>([]);
// 获取瀑布流数据
const getWaterfall = async () => {
  try {
    let res = await request(
      `/wy/topic/v1/find/recAuto.json?page=${page.value}&size=${size.value}`
    );
    list.value = list.value.concat(res.data.result[0].topics);
  } catch (error) {
    showFailToast("获取瀑布流数据失败，请刷新重试");
  }
};
// 滚动到底部更新数据
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  page.value++;
  getWaterfall();
};
// watch监听数据更新完毕后关闭loading
watch(list, (newValue, oldValue) => {
  loading.value = false;
});

//
const toDetail = () => {
  $router.push(`${list.value[0].schemeUrl}`);
};

onMounted(() => {
  // 页面渲染调用方法拿数据
  getSwiperList();
  getWaterfall();
});
</script>

<style lang="less">
.toDetail {
  display: block;
}

.getWaterfallList {
  margin: 20px;
}

.box {
  // background: yellowgreen;
  display: flex;
  flex-direction: column;
  width: device-width;
  overflow-x: hidden;
  padding: 0 20px;
  // 版心区
  .topicContainer {
    background: url("https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView")
      no-repeat top / contain #eee;
    width: 100%;
    height: 100%;
    padding: 30px 2% 50px;
    overflow: auto;
    flex: 1;
    // 值得买
    .topic {
      position: relative;
      // 值得买小图
      img {
        width: 65px;
        height: 35px;
      }
      // 用心生活—-文字
      .title {
        color: #eee;
        font-size: 12px;
        line-height: 7px;
        position: absolute;
        top: 20px;
        left: 66px;
      }
    }

    // 轮播图
    .swiperContainer {
      padding: 5px;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .my-swipe {
        // 轮播图小圆点
        .van-swipe__indicator {
          width: 20px;
          height: 2px;
          background: #d9d9d9;
          border-radius: 2px;
        }
        .van-grid {
          padding-bottom: 10px;
          .van-grid-item .van-grid-item__content {
            padding: 5px 0;
            .van-image {
              border-radius: 50%;
              // overflow: hidden;
              width: 60px;
              height: 60px;
              .van-image__img {
                width: 100%;
                height: 100%;
                vertical-align: center;
              }
            }
            .mainTitle {
              .van-grid-item__content {
                // height: 22px;
                .van-grid-item__text {
                  color: #333333;
                  font-size: 14px;
                  font-weight: 700;
                  white-space: nowrap;
                }
              }
            }
            .viceTitle {
              .van-grid-item__content {
                // height: 12px;
                .van-grid-4tem__text {
                  color: #999;
                  font-size: 12px;
                  white-space: nowrap;
                }
              }
            }
          }
        }
      }
    }

    // 瀑布流
    .waterfallContainer {
      margin-top: 15px;
      text-align: center;
      border-radius: 10px;
      overflow: hidden;
      // 大图片
      .image {
        width: 100%;
        display: block;
      }
      //中间文字
      .sloganText {
        margin-left: -30px;
        font-size: 16px;
        color: #333;
      }
      // 底部容器
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      // 左容器
      .contentLeft {
        display: flex;
        margin-right: 24px;
        div {
          margin: 0 5px 0 -14px;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          overflow: hidden;
          vertical-align: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        // 用户名文字
        .time {
          font-size: 12px;
          line-height: 24px;
          color: #7f7f7f;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      // 右容器
      .contentRight {
        display: flex;
        vertical-align: center;
        img {
          width: 16px;
          height: 16px;
        }
        // 点击量文字
        .button {
          padding: 0;
          // min-height: auto;
          color: #7f7f7f;
          font-size: 14px;
          line-height: 28px;
        }
      }
    }
  }
}
</style>